<template>
    <div class="msj_edit">
        <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/home' }">
        <i class="el-icon-s-home"></i>
        首页
    </el-breadcrumb-item>
      <el-breadcrumb-item :to="{ path: '/member/vlist' }">
        <i class="el-icon-s-custom"></i> 
        会员管理
      </el-breadcrumb-item>
      <!-- 当前 -->
      <el-breadcrumb-item>{{ breadcrumb }}</el-breadcrumb-item>
    </el-breadcrumb>

    <div class="msj_edit_detail">
        <!-- 返回 -->
        <p style="font-size:24px; font-weight:1000; margin:20px 0;">
            <i class="el-icon-arrow-left" @click="goback"></i>
        </p>
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
  <el-form-item label="等级名称" prop="dengjiname">
    <el-select v-model="ruleForm.dengjiname" placeholder="请选择等级">
      <el-option v-for="(item,index) in options" :key="index" :label="item.label" :value="item.value"></el-option>
    </el-select>
  </el-form-item>
  <el-form-item label="升级条件" >
    <el-radio v-model="radio" label="1">订单金额/数量</el-radio>
    <div>
        <span>完成订单金额满</span>
        <el-input v-model="ruleForm.sji" size="small" maxlength="4" :keyup="ruleForm.sji=ruleForm.sji.replace(/\D/g,'')" style="width:150px;margin:0 5px;" ></el-input>
        <span>元</span>
    </div>
    <p style="color:red; font-size:13px;">会员升级条件,不填写默认为不自动升级</p>
  </el-form-item>
  <el-form-item label="折扣" >
    <el-input type="text" v-model="ruleForm.zhekou" maxlength="4"  :keyup="ruleForm.zhekou=ruleForm.zhekou.replace(/[^\d.]/g,'')" style="width: 200px;" size="small"></el-input> <span>折</span>
    <p style="color:red; font-size:13px;">请输入0.1-10之间的数字,值为空代表不设置折扣</p>
  </el-form-item>
  <el-form-item label="状态" prop="resource">
    <el-radio-group v-model="ruleForm.statu">
      <el-radio label="启用"></el-radio>
      <el-radio label="禁用"></el-radio>
    </el-radio-group>
  </el-form-item>

  <el-form-item v-if="isshow">
    <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
    <el-button @click="resetForm">返回列表</el-button>
  </el-form-item>
</el-form>
    </div>
    </div>
</template>

<script>
import {putmsjvipdengji,addmsjvipdengji} from '../../../utils/api'
export default {
    name: 'PhaemacyEdit',

    data() {
        return {
            vips:{},
            isshow:1,
            isadd:1,
            radio:"1",
            breadcrumb:'',
            ruleForm: {
          dengjiname: '',
          sji: "",
          statu: '启用',
          zhekou: ''
        },
        options:[
        {
          value: 'lv.1',
          label: 'lv.1'
        },
        {
          value: 'lv.2',
          label: 'lv.2'
        },
        {
          value: 'lv.3',
          label: 'lv.3'
        },
        {
          value: 'lv.4',
          label: 'lv.4'
        },
        {
          value: 'lv.5',
          label: 'lv.5'
        },
        {
          value: 'lv.6',
          label: 'lv.6'
        },
        {
          value: 'lv.7',
          label: 'lv.7'
        },
        {
          value: 'lv.8',
          label: 'lv.8'
        },
        {
          value: 'lv.9',
          label: 'lv.9'
        },
        {
          value: 'lv.10',
          label: 'lv.10'
        }
        ],
        rules: {
            dengjiname: [
            { required: true, message: '请选择等级名称', trigger: 'change' }
          ]
        }
        };
    },

    mounted() {
        let {vips,breadcrumb,isshow,isadd}=this.$route.params
        if(vips){
        this.vips=vips
        let {dengjiname,sji,zhekou,statu}=vips
        this.ruleForm.dengjiname=dengjiname
        this.ruleForm.sji=sji
        this.ruleForm.zhekou=zhekou
        this.ruleForm.statu=statu=='1'?'启用':'禁用'
        this.breadcrumb=breadcrumb
        }
        this.isshow=isshow
        this.isadd=isadd!=undefined?isadd:this.isadd
        console.log(this.isadd);
    },

    methods: {
        // 返回
        goback(){
            this.$router.go(-1)
        },

        submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
           if(isNaN(this.ruleForm.zhekou)){
                this.$message.error('请输入正确的折扣'); 
           }else{
              if(Number(this.ruleForm.zhekou)>=0&&Number(this.ruleForm.zhekou)<=10){
                let obj={
                id:this.vips.id,
                dengji:this.ruleForm.dengjiname.slice(3),
                dengjiname:this.ruleForm.dengjiname,
                sji:this.ruleForm.sji==""?"默认等级":this.ruleForm.sji,
                zhekou:Number(this.ruleForm.zhekou).toFixed(2) ,
                statu:this.ruleForm.statu=='启用'?'1':'0'
               }
               console.log(obj);
               (this.isadd?addmsjvipdengji(obj):putmsjvipdengji(obj)).then(res=>{
                if(res.status==200){
                  this.$message({
                  message: res.data.msg,
                  type: 'success'
                  });
                  if(res.data.msg=="创建成功"){
                      this.ruleForm.dengjiname='';
                      this.ruleForm.sji='';
                      this.ruleForm.zhekou='';
                      this.ruleForm.statu='启用';
                  }
                }
               })
              }else{
                this.$message.error('请输入折扣在0.1-10之间');
              }
               
           }
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      resetForm() {
       this.goback()
      }
    },
};
</script>

<style scoped>
*{
    margin: 0;
}
    .msj_edit_detail,.msj_edit{
        width: 100%;
    }
    .msj_edit_detail{

    }
    .el-form-item{
        margin-bottom: 10px;
    }
</style>